<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2022-12-06 18:09:02
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-30 18:06:01
-->
<template>
  <!-- 子页面面板 -->
  <x-sub-page class="user-auth flex-column" :content="'查看权限'" :isFixBtn="true">
    <el-descriptions class="user-auth-info" title="用户信息" :column="4" style="padding: 15px 15px 5px 15px">
      <el-descriptions-item label="姓名">{{ params?.realName ?? '' }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{
        params.gender ? selectDictLabel(dictOptions['upms_user.gender'], params.gender) : '未知'
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="部门">{{ params.deptNames }}</el-descriptions-item> -->
      <el-descriptions-item label="员工职级">{{ params?.rankName ?? '' }}</el-descriptions-item>
      <el-descriptions-item label="员工状态">{{
        params.workStatus ? selectDictLabel(dictOptions['upms_user.work_status'], params.workStatus) : '未知'
      }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ params?.mobile ?? '' }}</el-descriptions-item>
      <el-descriptions-item label="账号状态">{{
        params.state ? selectDictLabel(dictOptions['system.state'], params.state) : '未知'
      }}</el-descriptions-item>
    </el-descriptions>
    <div class="post-auth-content">
      <ul class="user-post-list">
        <li class="title">权限列表</li>
        <el-scrollbar style="height: calc(100% - 60px)">
          <li
            v-if="params.mainPost"
            :key="-2"
            :class="['post-item', currentPostIndex === -2 ? 'current-post' : '']"
            @click="handleClickItem(-2)"
            :title="params.mainPost?.postName ?? ''"
          >
            {{ params.mainPost?.postName ?? '' }}
            <el-tag :effect="currentPostIndex === -2 ? 'plain' : 'light'" size="mini">主岗</el-tag>
          </li>
          <li
            v-for="(item, index) in postList"
            :key="item.id"
            @click="handleClickItem(index)"
            :class="['post-item', currentPostIndex === index ? 'current-post' : '']"
            :title="item.postName"
            >{{ item.postName }}
            <el-tag :effect="currentPostIndex === index ? 'plain' : 'light'" size="mini">副岗</el-tag>
          </li>
          <li
            :key="-1"
            :class="['post-item', currentPostIndex === -1 ? 'current-post' : '']"
            @click="handleClickItem(-1)"
            :title="'自定义角色是指用户直接与角色绑定关系的集合'"
            >自定义角色</li
          >
        </el-scrollbar>
      </ul>
      <div class="role-list-contanier">
        <h3>权限详情</h3>
        <el-tabs type="card" class="roles-tab" v-model="activeRoles" @tab-click="handleClickRole">
          <el-tab-pane v-for="item in userRoles" :key="item.id" :label="item.roleName" :name="item.id"></el-tab-pane>
        </el-tabs>
        <div
          :style="{ height: userRoles.length ? 'calc(100% - 80px)' : 'calc(100% - 30px)' }"
          v-show="userRoles.length > 0"
        >
          <role-auth-info ref="roleAuthComponents" :roleInfo="currentRole" :dept-name="deptName" :mode="'view'" />
        </div>
        <div class="no-data" v-if="!userRoles.length"> 暂无角色权限数据 </div>
      </div>
    </div>
    <fixed-btn-area>
      <el-button @click="handleBack()"> {{ $t('common.cancel') }} </el-button>
    </fixed-btn-area>
  </x-sub-page>
</template>
<script>
  import { cloneDeep, selectDictLabel } from '@package/utils'
  import { apiGetRoleInfo } from '@/modules/auth/api'
  import { QueryDictMixin } from '@/common/mixins'
  import { apiGetUserInfo } from '../api'

  export default {
    name: 'UserAuth',
    mixins: [QueryDictMixin],
    inject: ['closePages'],
    props: {},
    data() {
      return {
        params: {},
        postList: [],
        userRoles: [],
        currentRole: {},
        currentPostIndex: -1,
        dictKeys: [
          'upms_user.online_status',
          'upms_user.work_status',
          'upms_user.gender',
          'system.state',
          'upms_user.user_type'
        ],
        activeRoles: '',
        deptName: ''
      }
    },
    mounted() {
      const params = this.$route.query
      this.getUserInfo(params.userId)
      this.initDictConfig()
    },
    methods: {
      selectDictLabel,
      getUserInfo(id) {
        apiGetUserInfo(id).then(({ data }) => {
          this.params = cloneDeep(data)
          this.postList = [...this.params.deputyPosts]
          this.handleClickItem(this.params.mainPost ? -2 : this.postList.length ? 0 : -1)
        })
      },
      handleClickItem(index) {
        this.currentPostIndex = index
        if (this.currentPostIndex >= 0) {
          this.userRoles = this.postList[this.currentPostIndex].roles
          this.deptName = this.postList[this.currentPostIndex].deptName
        } else if (this.currentPostIndex === -2) {
          this.userRoles = this.params.mainPost.roles
          this.deptName = this.params.mainPost.deptName
        } else {
          this.userRoles = this.params.roles
        }
        if (this.userRoles?.length) {
          this.handleClickRole({ name: this.userRoles[0].id })
        }
      },
      handleClickRole(tab) {
        this.activeRoles = tab.name
        this.$refs.roleAuthComponents.clearRoleAuth()
        apiGetRoleInfo(this.activeRoles).then(({ data }) => {
          this.currentRole = data
        })
      },
      handleBack() {
        this.$refs.roleAuthComponents.clearRoleAuth()
        this.$router.go(-1)
        this.closePages()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .post-auth-content {
    display: flex;

    height: calc(100% - 150px);

    /* padding: 15px; */
    border-top: 10px solid #f5f5f5;

    ul.user-post-list {
      width: 260px;

      /* flex: 1; */
      // padding: 15px;
      border-right: 10px solid #f5f5f5;
    }

    li.title {
      font-size: 16px;
      font-weight: bold;
      // margin-bottom: 10px;
      padding: 15px;
      text-align: left;
      /* text-align: center; */
      color: #303133;
    }

    li.post-item {
      font-size: 16px;
      margin-bottom: 10px;
      // line-height: 30px;
      padding: 10px 15px;
      cursor: pointer;
      text-align: left;
      color: #333;
      // border: 1px solid rgb(228, 228, 228);
      // border-radius: 6px;
      background-color: #fff;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      &.current-post {
        color: #fff;
        background-color: #4474f6;
      }
    }

    .roles-tab {
      margin-top: 10px;
    }

    .role-list-contanier {
      flex: 1;
      padding: 15px;

      h3 {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
      }
    }
  }

  .no-data {
    text-align: center;
  }
</style>
<style lang="scss">
  .user-post-list .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .is-horizontal {
    display: none;
  }
  .user-auth-info.el-descriptions > .el-descriptions__header {
    margin-bottom: 15px;
  }
</style>
